<!DOCTYPE html>
<html>
<head>
    <title>电子钟</title>
    <style type="text/css">
        
        #clock{
            width:100%;
            font-size: 80px;
            font-weight: bold;
            text-align: center;
            margin: 20px;
        }
        .shizhong{
            margin: 10px;
            width: 20%;
            height: 100px;
            float: left;
            border: gray 1px solid;
        }
        .maohao{
            width: 1%;
            float: left;
            margin: 10px;
            color:black;
        }
    </style>
</head>
<body>
    <h1>电子时钟的设计与实现</h1>
    <hr>
    <div id="clock">
        <div id="h" class="shizhong" style="color:blue;"></div>
        <div class="maohao">:</div>
        <div id="m" class="shizhong" style="color:blue;"></div>
        <div class="maohao">:</div>
        <div id="s" class="shizhong" style="color:blue;"></div>
    </div>
    <script type="text/javascript">
        //获取显示小时的区域框对象
        var hour = document.getElementById('h');
        //获取显示分钟的区域框对象
        var minute = document.getElementById('m');
        //获取显示秒的区域框对象
        var second = document.getElementById('s');
        //定义函数获取当前时间
        function getCurrentTime() {
            var date = new Date();
            var h = date.getHours(); //获取小时
            var m = date.getMinutes(); //获取分钟
            var s = date.getSeconds(); //获取秒
            //确保0-9时也显示成两位数
            if (h < 10) {
                h = '0' + h;
            }
            if (m < 10) {
                m = '0' + m;
            }
            if (s < 10) {
                s = '0' + s;
            }
            hour.innerHTML = h;
            minute.innerHTML = m;
            second.innerHTML = s;
        }
        //每秒更新一次时间
        setInterval(getCurrentTime, 1000);
        // 初始调用以显示页面加载时的时间
        getCurrentTime();
    </script>
</body>
</html>